<template>
  <div class="packingDetail">
    <!-- 整合包名称 -->
    <div class="title">
      <img src="@/assets/icon/packing-0.png" />
      <span>{{ propsData.contentName.split(" ")[1] }}</span>
    </div>
    <!-- 文字介绍 -->
    <div class="introduction">
      <div>
        <img src="@/assets/icon/introduction.png" />
        <span> 整合包介绍：</span>
      </div>
      <p>{{ textIntroduction }}</p>
    </div>
    <!-- 轮播图 -->
    <div class="carousel">
      <el-carousel :interval="3000" type="card" height="320px" :autoplay="true">
        <el-carousel-item v-for="(pic, index) in picList" :key="index">
          <img :src="pic.imagePath" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 操作按钮 -->
    <div class="controller" @click="confirm">
      <img src="@/assets/other/打勾.png" />
      <span>替换</span>
    </div>
    <!-- 删除mod -->
    <div class="deleteModRun" @click="deleteModRun">
      <img src="@/assets/other/删除.png" />
      <span>删除Mod</span>
    </div>
  </div>
</template>
  
<script>
/*eslint-disable*/
import { getCurrentInstance, onMounted } from "vue";
import mainApi from "@/api/mainApi";
import { ElMessage } from "element-plus";

export default {
  name: "detail",
  props: {
    propsData: {
      type: Object,
      default: "",
    },
  },
  data() {
    return {
      textIntroduction: "",
      picList: [],
      mainFolder: "",
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    let fs = window.myApi.fs,
      path = window.myApi.path;
    let fileHousePath;

    onMounted(() => {
      mainApi.readJson(ElMessage, (data) => {
        console.log(proxy.propsData);
        fileHousePath = data.fileHouse;
        proxy.mainFolder = window.myApi.path.join(
          data.fileHouse,
          proxy.propsData.contentType,
          proxy.propsData.contentName
        );
        // 遍历文件路径
        traverseDirectory(proxy.mainFolder, (pic) => {
          proxy.picList.push(pic);
        });
      });
      console.log(proxy.picList);
    });

    // 文件读取
    function traverseDirectory(folderPath, fun) {
      let fs = window.myApi.fs;
      let path = window.myApi.path;

      if (!fs.existsSync(folderPath)) {
        console.log("文件夹不存在:", folderPath);
        return;
      }

      // console.log(files);

      // 文字介绍路径
      let textPath = path.join(folderPath, "introduction", "intro.json");
      // 读取文字介绍
      fs.readFile(textPath, "utf-8", (err, data) => {
        if (err) {
          ElMessage({
            message: `文字介绍读取失败`,
            type: "error",
            duration: 5000,
          });
          throw err;
        }

        // 解析JSON数据
        try {
          proxy.textIntroduction = JSON.parse(data).text;
        } catch (error) {
          ElMessage({
            message: `解析JSON时出错`,
            type: "error",
            duration: 5000,
          });
          throw err;
        }
      });

      // 轮播图片文件夹路径
      let picFolder = path.join(folderPath, "introduction", "content");
      // 遍历读取文件夹中的图片
      fs.readdirSync(picFolder).forEach((pic) => {
        let picPath = path.join(picFolder, pic);
        fs.readFile(picPath, { encoding: "base64" }, (err, imageData) => {
          if (err) {
            ElMessage({
              message: `[${file}]图片读取失败`,
              type: "error",
              duration: 10000,
            });
            throw err;
          }

          // 载入内容
          fun({
            imagePath: `data:image/jpeg;base64,${imageData}`,
          });
        });
      });
    }

    // 确认替换
    function confirm() {
      // 路径整理
      let modFolder = window.myApi.path.join(proxy.mainFolder, "mods");
      console.log(modFolder);
      // 执行替换
      mainApi.modReplace(modFolder, proxy.propsData.contentName);
    }

    // 删除Mod总起
    function deleteModRun() {
      let filePath = path.join(
        fileHousePath,
        proxy.propsData.contentType,
        proxy.propsData.contentName,
        "mods"
      );
      console.log(filePath);
      // 打开文件路径
      fs.readdirSync(filePath).forEach((element) => {
        fs.readdirSync(path.join(filePath, element)).forEach((element2) => {
          deleteMod(
            element != "waigua" ? path.join(element, element2) : element2
          );
        });
      });
    }

    // 删除Mod执行
    function deleteMod(modName) {
      mainApi.readJson(ElMessage, (data) => {
        // mod路径拼接
        let modPath = path.join(data.waigua, modName);
        mainApi.writeDailyLog("执行删除:" + modPath + "--detail.vue");
        // 判断mod文件是否存在
        fs.access(modPath, fs.constants.F_OK, (err) => {
          if (err) {
            ElMessage({ message: modName + "不存在", type: "error" });
            mainApi.writeDailyLog("待删文件不存在:" + modPath + "--detail.vue");
          } else {
            // 删除
            fs.unlink(modPath, (err) => {
              if (err) {
                ElMessage({ message: "删除失败" + err, type: "error" });
                mainApi.writeDailyLog("删除失败:" + err + "--detail.vue");
              } else {
                ElMessage({ message: modName + "删除成功" });
                mainApi.writeDailyLog("删除成功:" + modPath + "--detail.vue");
              }
            });
          }
        });
      });
    }

    return {
      confirm,
      deleteModRun,
    };
  },
};
</script>
  
<style lang="less" scoped>
@import "../less/variables.less";
.packingDetail {
  > .title {
    display: flex;
    align-items: center;
    > img {
      width: 30px;
    }
    > span {
      font-size: 150%;
      font-weight: bold;
      margin-left: 0.5%;
    }
  }
  > .author {
    // border-radius: 5px;
    // box-shadow: 1px 1px 3px @red;
    border-bottom: @red 1px solid;
    padding: 0.5% 1%;
    display: inline;
    align-items: center;
    color: @red;
    > img {
      margin: 1% 0;
      vertical-align: middle;
      width: 20px;
      padding-bottom: 0.25%;
    }
    > span {
      // vertical-align: middle;
      font-size: 110%;
      font-weight: bold;
      margin: 0% 0.5%;
    }
    > span:last-child {
      font-weight: normal;
      color: black;
      margin: 0;
    }
  }
  > .introduction {
    // border-radius: 5px;
    // box-shadow: 1px 1px 3px @red;
    // border-bottom: @red 1px solid;
    padding: 0.5%;
    margin-bottom: 1%;
    max-width: 80%;
    > div {
      display: flex;
      flex-direction: row;
      align-items: center;
      > img {
        width: 20px;
      }
      > span {
        font-weight: bold;
        font-size: 110%;
        margin: 0% 0.5%;
        color: @red;
      }
    }
    > p {
      margin: 0.5% 0%;
    }
  }
  > .carousel {
    width: 1225px !important;
    margin: 0 auto;
    .el-carousel__item {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      border-radius: 5px;
      width: @courtWidth;
      height: @courtHeight;
      padding: 5px;
      box-shadow: 1px 1px 3px @red;
      > img {
        opacity: 0.8;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 5px;
      }
    }

    .el-carousel__item--card.is-active {
      > img {
        opacity: 1;
      }
    }
  }
  > .controller {
    width: 80px;
    border-radius: 5px;
    background-color: @red;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    > img {
      width: 15px;
      margin-right: 5px;
    }
    > span {
      color: #fff;
      font-weight: bold;
      font-size: 120%;
    }
  }
  > .controller:hover {
    cursor: pointer;
    background-color: #ff4d58;
  }
  > .deleteModRun {
    border-radius: 5px;
    background-color: #3094ff;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    width: 8%;
    margin-top: 0.5%;
    > img {
      width: 20px;
    }
  }
  > .deleteModRun:hover {
    cursor: pointer;
    background-color: #55a7ff;
  }
}
</style>